<template>
	<div class="app-container">
		<!--  添加邮件发送方配置-->
		<el-form :model="data.info" :label-width="language == 'en' ? '190px' : '150px'" class="w-1/2" ref="ruleFormRef"
			v-if="route.query.type == '1' || route.query.type == '3'">
			<span
				:class="language == 'en' ? 'absolute text-[#ef4444] ml-20 mt-2' : 'absolute text-[#ef4444] ml-10 mt-2'">*</span>
			<el-form-item :label="$t('system.mail.smtpSserver') + ':'" prop="host">
				<el-input v-model="data.info.host" :placeholder="$t('message.pleaseEnter')" />
			</el-form-item>
			<span
				:class="language == 'en' ? 'absolute text-[#ef4444] ml-14 mt-2' : 'absolute text-[#ef4444] ml-24 mt-2'">*</span>
			<el-form-item :label="$t('eventlog.user.account') + ':'" prop="username">
				<el-input v-model="data.info.username" :placeholder="$t('message.pleaseEnter')" />
			</el-form-item>
			<span
				:class="language == 'en' ? 'absolute text-[#ef4444] ml-24 mt-2' : 'absolute text-[#ef4444] ml-20 mt-2'">*</span>
			<el-form-item :label="$t('system.mail.authCode') + ':'" prop="authCode">
				<el-input v-model="data.info.authCode" :placeholder="$t('message.pleaseEnter')" />
			</el-form-item>
			<span
				:class="language == 'en' ? 'absolute text-[#ef4444] ml-16 mt-2' : 'absolute text-[#ef4444] ml-14 mt-2'">*</span>
			<el-form-item :label="$t('system.mail.emailSende') + ':'" prop="sendEmail">
				<el-input v-model="data.info.sendEmail" :placeholder="$t('message.pleaseEnter')" />
			</el-form-item>
			<el-form-item :label="$t('system.mail.sender') + ':'" prop="nickname">
				<el-input v-model="data.info.nickname" :placeholder="$t('message.pleaseEnter')" />
			</el-form-item>
			<el-form-item :label="$t('system.mail.emailReply') + ':'" prop="replyMail">
				<el-input v-model="data.info.replyMail" :placeholder="$t('message.pleaseEnter')" />
			</el-form-item>
			<el-form-item :label="$t('system.mail.nameReply') + ':'" prop="replyNickname">
				<el-input v-model="data.info.replyNickname" :placeholder="$t('message.pleaseEnter')" />
			</el-form-item>
			<el-form-item :label="$t('system.mail.HTMLcontent') + ':'" prop="isHtml">
				<el-select v-model="data.info.isHtml" :placeholder="$t('message.pleaseSelect')">
					<el-option :label="$t('public.yes')" :value="1" />
					<el-option :label="$t('public.no')" :value="2" />
				</el-select>
			</el-form-item>
			<el-form-item l:label="$t('strategy.payee.state')+':'" prop="status">
				<el-select v-model="data.info.status" :placeholder="$t('message.pleaseSelect')">
					<el-option :label="$t('public.open')" :value="1" />
					<el-option :label="$t('public.disable')" :value="2" />
				</el-select>
			</el-form-item>

			<div class="w-full text-center">
				<div class="inline-block">
					<el-button size="small" type="primary" @click="submit(1)">
						{{ $t('public.save') }}
					</el-button>
					<el-button size="small" @click="cancell">
						{{ $t('public.cancel') }}
					</el-button>

				</div>
			</div>

		</el-form>
		<!--  添加邮件消息模板-->
		<el-form :model="data.info" label-width="150px" class="w-1/2" ref="ruleFormRef" v-else>
			<span class="absolute text-[#ef4444] ml-24 mt-2">*</span>
			<el-form-item :label="$t('log.title') + ':'" prop="subject">
				<el-input v-model="data.info.subject" :placeholder="$t('message.pleaseEnter')" />
			</el-form-item>
			<span
				:class="language == 'en' ? 'absolute text-[#ef4444] ml-8 mt-2' : 'absolute text-[#ef4444] ml-16 mt-2'">*</span>
			<el-form-item :label="$t('system.mail.type') + ':'" prop="template_type">
				<el-select v-model="data.info.template_type" :placeholder="$t('message.pleaseSelect')">
					<el-option v-for="(item, index) in getPlevel.emailTypeList" :key="item.value"
						:label="$t(item.label)" :value="item.value" />
				</el-select>
			</el-form-item>
			<el-form-item :label="$t('system.mail.CC') + ':'" prop="CC">
				<el-input v-model="data.info.CC" :placeholder="$t('message.pleaseEnter')" />
			</el-form-item>
			<el-form-item :label="$t('system.mail.delivery') + ':'" prop="BCC">
				<el-input v-model="data.info.BCC" :placeholder="$t('message.pleaseEnter')" />
			</el-form-item>
			<el-form-item :label="$t('system.mail.attachments') + ':'" prop="attachment">
				<el-input v-model="data.info.attachment" readonly>
					<template #append>
						<Upload :list="{ 'data': 'goods', 'list': false }" :type="0" :uptype="2" @exposeData="expose" />
					</template>
				</el-input>
			</el-form-item>
			<el-form-item :label="$t('strategy.payee.state') + ':'" prop="status">
				<el-select v-model="data.info.status" :placeholder="$t('message.pleaseSelect')">
					<el-option :label="$t('public.open')" :value="1" />
					<el-option :label="$t('public.disable')" :value="2" />
				</el-select>
			</el-form-item>
			<el-form-item :label="$t('machine.infos.organiz') + 'ID:'" prop="ao_id">
				<el-select v-model="data.info.ao_id" :placeholder="$t('message.pleaseSelect')">
					<el-option v-for="(item, index) in data.aolist" :key="item.value"
						:label="item.ao_id + '-' + item.label" :value="item.ao_id" />
				</el-select>
			</el-form-item>
			<span
				:class="language == 'en' ? 'absolute text-[#ef4444] ml-2 mt-2' : 'absolute text-[#ef4444] ml-16 mt-2'">*</span>
			<el-form-item :label="$t('system.mail.textual') + ':'" prop="body">
				<div class="border pl-4 pr-4 mb-4 cursor-pointer rounded mr-4" v-for="(item, index)  in dataList"
					:key="index" @click="bodyItem(item)">
					{{ item.title }}</div>
				<Editor v-model="data.info.body" />
			</el-form-item>
			<div class="w-full text-center">
				<div class="inline-block">
					<el-button size="small" type="primary" @click="submit(2)">
						{{ $t('public.save') }}
					</el-button>
					<el-button size="small" @click="cancell">
						{{ $t('public.cancel') }}
					</el-button>

				</div>
			</div>

		</el-form>
	</div>
</template>

<script lang="ts" setup>
import { useI18n } from 'vue-i18n'
const { t: $t } = useI18n()
import { useRouter, useRoute } from "vue-router";
import getPlevel from '@/utils/level';
import { getEmailUpdate, getEmailAdd, getMesAdd, getMesUpdate, getFind } from '@/api/system-mail'
import { onMounted } from "vue";
import arrange from '@/utils/hierarchy';
import Editor from '@/components/Editor/index.vue';
import { ElMessage } from 'element-plus'
let language = ref()
const { locale } = useI18n()
onMounted(() => {
	language.value = locale.value
})
let dataList = [
	{ title: $t('mock.currentTime'), value: "{{now}}" },
	{ title: $t('mock.currentDate'), value: "{{data}}" },
	{ title: $t('mock.point'), value: "{{time}}" },
	{ title: $t('mock.year'), value: "{{Y}}" },
	{ title: $t('public.moon'), value: "{{m}}" },
	{ title: $t('public.sun'), value: "{{d}}" },
	{ title: $t('public.hour'), value: "{{H}}" },
	{ title: $t('public.minute'), value: "{{i}}" },
	{ title: $t('public.second'), value: "{{s}}" },
	{ title: $t('machine.code'), value: "{{machine_id}}" },
	{ title: $t('machine.name'), value: "{{machine_name}}" },
	{ title: $t('system.errCode.code'), value: "{{errorCode}}" },
	{ title: $t('public.onLine'), value: "{{online}}" },
	{ title: $t('public.lastOnline'), value: "{{last_online_time}}" },
	{ title: $t('public.country'), value: "{{country}}" },
	{ title: $t('public.address'), value: "{{address}}" },
	{ title: $t('public.stat'), value: "{{state}}" },
	{ title: $t('public.city'), value: "{{city}}" },
	{ title: $t('public.region'), value: "{{regions}}" },
	{ title: $t('public.street'), value: "{{street}}" },
	{ title: $t('public.floor'), value: "{{floor}}" },
	{ title: $t('account.account.name'), value: "{{nickname}}" },
	{ title: $t('public.desc'), value: "{{exceptionDeclaration}}" }]
let router = useRouter()
const route = useRoute()
let data = reactive({
	machine_status: false, // 是否默认选中设备
	info: {
		isHtml: 1,
		status: 1,
		body: ''
	}, // 主体信息
	typeList: [],
	aolist: [],
	positionList: []
})

let bodyItem = (row: any) => {
	data.info.body = data.info.body.concat(row.value)
}
// 获取接口信息
let geturl = async () => {
	let array = await arrange.arrange(1);
	data.aolist = array
}
geturl()
// 上传返回
let expose = (e) => {
	if (e.status == 200) {
		data.info.attachment = e.file.response.data
	} else {
		data.info.attachment = ''
	}
}
onMounted(() => {
	if (route.query.type == '3') {
		let row = JSON.parse(decodeURI(route.query.l)).info
		data.info.ec_id = row.ec_id
		data.info.host = row.host
		data.info.username = row.username
		data.info.authCode = row.authCode
		data.info.sendEmail = row.sendEmail
		data.info.nickname = row.nickname
		data.info.replyMail = row.replyMail
		data.info.replyNickname = row.replyNickname
		data.info.isHtml = row.isHtml
		data.info.status = row.status
	}
	if (route.query.type == '4') {
		getFind({ et_id: route?.query.id }).then(res => {
			let row = res.data
			data.info.et_id = row.et_id
			data.info.status = row.status,
				data.info.CC = row.CC,
				data.info.BCC = row.BCC,
				data.info.subject = row.subject,
				data.info.body = row.body,
				data.info.attachment = row.attachment,
				data.info.template_type = row.template_type,
				data.info.ao_id = row.ao_id
		})
	}
})
// 保存
let submit = (falg) => {
	// 发送方配置
	if (falg == 1) {
		if (data.info.host == '' || data.info.username == '' || data.info.authCode == '' || data.info.sendEmail == '') {
			ElMessage({
				message: $t('message.pleaseFill'),
				type: 'error'
			});
			return;
		}
		let reg = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/
		if (!reg.test(data.info.replyMail)) {
			ElMessage({
				message: $t('message.emailFormat'),
				type: 'error'
			});
			return;
		}

		let pram = {
			ec_id: data.info.ec_id,
			host: data.info.host,
			username: data.info.username,
			authCode: data.info.authCode,
			sendEmail: data.info.sendEmail,
			nickname: data.info.nickname,
			replyMail: data.info.replyMail,
			replyNickname: data.info.replyNickname,
			isHtml: data.info.isHtml,
			status: data.info.status
		};
		// 添加邮件发送方配置
		if (route.query.type == '1') {
			getEmailAdd(pram).then(res => {
				if (res.state == 200) {
					ElMessage({
						message: $t('message.addSuccess'),
						type: 'success'
					});
					router.back()
					return;
				}
				ElMessage({
					message: $t('message.addFailed'),
					type: 'error'
				});
			});
		}
		// 修改邮件发送方配置
		if (route.query.type == '3') {
			getEmailUpdate(pram).then(res => {
				if (res.state == 200) {
					ElMessage({
						message: $t('message.updateSuccess'),
						type: 'success'
					});
					router.back()
					return;
				}
				ElMessage({
					message: $t('message.updateFailed'),
					type: 'error'
				});
			});
		}

	}
	// 消息模板
	if (falg == 2) {
		if (data.info.subject == '' || data.info.body == '' || data.info.template_type == '') {
			ElMessage({
				message: $t('message.pleaseFill'),
				type: 'error'
			});
			return;
		}
		if (data.info.CC || data.info.BCC) {
			let reg = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/
			if (!reg.test(data.info.CC) || !reg.test(data.info.BCC)) {
				ElMessage({
					message: $t('message.emailFormat'),
					type: 'error'
				});
				return;
			}
		}

		// 添加邮件消息模板
		if (route.query.type == '2') {
			let pram = {
				ec_id: route?.query.id,
				status: data.info.status,
				CC: data.info.CC,
				BCC: data.info.BCC,
				subject: data.info.subject,
				body: data.info.body,
				attachment: data.info.attachment,
				template_type: data.info.template_type,
				ao_id: data.info.ao_id
			};
			getMesAdd(pram).then(res => {
				if (res.state == 200) {
					ElMessage({
						message: $t('message.addSuccess'),
						type: 'success'
					});
					router.back()
					return;
				}
				ElMessage({
					message: $t('message.addFailed'),
					type: 'error'
				});
			});
		}
		// 修改邮件消息模板
		if (route.query.type == '4') {
			let pram = {
				et_id: route?.query.id,
				status: data.info.status,
				CC: data.info.CC,
				BCC: data.info.BCC,
				subject: data.info.subject,
				body: data.info.body,
				attachment: data.info.attachment,
				template_type: data.info.template_type,
				ao_id: data.info.ao_id
			};
			getMesUpdate(pram).then(res => {
				if (res.state == 200) {
					ElMessage({
						message: $t('message.modifySuccess'),
						type: 'success'
					});
					router.back()
					return;
				}
				ElMessage({
					message: $t('message.addFailed'),
					type: 'error'
				});
			});
		}
	}
}
// 取消
let cancell = () => {
	router.back()
	data.info = JSON.parse(data.original)
	data.material = ''
}

</script>
<style type="text/css">
.dashed {
	border: 2px dashed var(--el-border-color);
}
</style>